<template>
  <div class="publicpageview">
    <div class="publicformview">
      <el-form :inline="true" :model="listQuery" size="mini" ref="searchForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="管理单位：" prop="districtId">
              <el-select v-model="listQuery.districtId" clearable @change="handleQuchange">
                <el-option v-for="item in areaList" :label="item.dname" :value="item.did" :key="item.did"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="管理部：" prop="houseAdminId">
              <el-select v-model="listQuery.houseAdminId" clearable>
                <el-option v-for="item in houseAdminList" :label="item.aname" :value="item.aid"
                  :key="item.aid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="所号：" prop="blockId">
              <el-input v-model="listQuery.blockId"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="所地址：" prop="blockAddress">
              <el-input v-model="listQuery.blockAddress"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="计划年份：" prop="projectYear">
              <el-date-picker v-model="listQuery.projectYear" type="year" placeholder="选择年">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="维修项目" prop="repairProject">
              <el-input v-model="listQuery.repairProject"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="是否上报：" prop="isPlanSubmission">
              <el-select v-model="listQuery.isPlanSubmission" clearable>
                <el-option label="否" :value="0" key="1"></el-option>
                <el-option label="是" :value="1" key="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <div style="padding-left: 90px;">
              <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
              <el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="publitableview">
      <el-button type="primary" size="mini" @click="handleAddUser('add')">计划录入</el-button>
      <el-button type="primary" size="mini" @click="handleBatchImport">批量计划录入</el-button>
      <el-button type="primary" size="mini" @click="handleReportDialogOpen"
        :disabled="multipleSelection.length == 0">计划上报</el-button>
      <el-table :data="list" border fit highlight-current-row size="mini" @selection-change="handleSelectionChange">

        <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>
        <el-table-column align="center" label="区房屋管理单位" prop="districtName">
        </el-table-column>
        <el-table-column align="center" label="管理部(分中心)" prop="houseAdminName">
        </el-table-column>
        <el-table-column align="center" label="所号" prop="blockId">
        </el-table-column>
        <el-table-column align="center" label="所地址" prop="blockAddress">
        </el-table-column>

        <el-table-column align="center" label="工程年份" prop="projectYear">
          <template slot-scope="scope">
            {{getTime(scope.row.projectYear)}}
          </template>
        </el-table-column>

        <el-table-column align="center" label="房屋性质" prop="propertyType">
        </el-table-column>

        <el-table-column align="center" label="工程类别" prop="engineeringCategory">
        </el-table-column>

        <el-table-column align="center" label="修缮项目" prop="repairProject">
        </el-table-column>

        <el-table-column align="center" label="审批状态" prop="status">
          <template slot-scope="scope">
            {{statusName(scope.row.status)}}
          </template>

        </el-table-column>

        <el-table-column align="center" label="操作" width="180" fixed="right">
          <template slot-scope="scope">

            <el-button type="text" size="mini" @click="handleUpdate(scope.row, 'update')">修改</el-button>
            <el-button type="text" size="mini" @click="handleUpdate(scope.row,'details')">详情</el-button>
            <el-button type="text" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="publicpaginationview">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total" small></el-pagination>
      </div>
    </div>

    <el-dialog :title="isAdd == 'add' ? '年修缮计划录入' : isAdd == 'update' ? '年修缮计划修改' : '年修缮计划详情'"
      :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <el-form :model="formData" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="150px"
        size="mini">

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="区房屋管理单位：" prop="districtId">
              <el-select v-model="formData.districtId" @change="handleFormQuchange" :disabled="true">
                <el-option v-for="item in areaList" :label="item.dname" :value="item.did" :key="item.did"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="管理部(分中心)：" prop="houseAdminId">
              <el-select v-model="formData.houseAdminId" @change="handleHouseChange" :disabled="true">
                <el-option v-for="item in houseFormAdminList" :label="item.aname" :value="item.aid"
                  :key="item.aid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="管片：" prop="blockGroupId">
              <el-select v-model="formData.blockGroupId" @change="handleGuanpianChange">
                <el-option v-for="item in guanpianList" :label="item.groupnew" :value="item.groupnew"
                  :key="item.groupnumber"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="所号：" prop="blockId">
              <el-select v-model="formData.blockId" @change="handleSuoChange">
                <el-option v-for="item in suoList" :label="item.blockno" :value="item.blockid"
                  :key="item.blockid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="所地址：" prop="blockAddress">
              <el-input v-model="formData.blockAddress" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房屋性质：" prop="propertyType">
              <el-input v-model="formData.propertyType" :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="工程类别：" prop="engineeringCategory">
              <el-select v-model="formData.engineeringCategory" @change="handleOneChange">
                <el-option v-for="item in oneList" :label="item.classname" :value="item.classname"
                  :key="item.classid"></el-option>

              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="修缮项目：" prop="repairProject">
              <el-select v-model="formData.repairProject" @change="handleTwoChange">
                <el-option v-for="item in twoList" :label="item.classmid" :value="item.classmid"
                  :key="item.classmidid"></el-option>

              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="formData.workloadName">
            <el-form-item label="工作量：" prop="workloadValue">
              <el-input v-model="formData.workloadValue">
                <template slot="append">{{formData.workloadName}}</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="工程年份：" prop="projectYear">
              <el-date-picker v-model="formData.projectYear" type="year" placeholder="年">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目预算(万元)：" prop="projectYusuan">
              <el-input v-model="formData.projectYusuan">
                <template slot="append">万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注：" prop="note">
              <el-input v-model="formData.note"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false" size="medium" v-if="isAdd == 'details'">返
          回</el-button>

        <el-button type="primary" @click="handleSubmitClick" size="medium" v-else>保 存</el-button>
      </span>
    </el-dialog>

    <!-- 批量导入弹窗 -->
    <el-dialog title="上传文件" :visible.sync="uploadDialogVisible" width="680px" @close="handleUploadDialogClose">
      <div class="upload-container">
        <el-upload class="upload-dragger" drag :action="uploadAction" :file-list="fileList"
          :on-success="handleUploadSuccess" :on-error="handleUploadError" :limit="1" :on-remove="handleFileRemove"
          :before-upload="beforeUpload" :auto-upload="true" ref="upload">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            请将文件拖动到此处，或<em style="color: #008C93;">点击上传</em>
          </div>
        </el-upload>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="handleImport" :loading="importLoading">保 存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  listAll,
  createPlanYear,
  updatePlanYear,
  deletePlanYear,
  backPlanYear,
  reportPlanYear
} from '@/api/repair'

import {
  getClassmid,
  getClassdetail,
  getClassNewAll
} from '@/api'
import {
  getArea,
  getHouseAdmin,
  getBlockGroup,
  getBlockByGroup,
  upload
} from '@/api/common'
import { Message } from 'element-ui'
import moment from 'moment'
export default {
  name: 'AccommodationManagementIndex',

  data() {
    return {
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        districtId: '',
        houseAdminId: '',
        blockId: '',
        blockAddress: '',
        projectYear: '',
        repairProject: '',
        isPlanSubmission: null,
        dataType: 1
      },
      reportYear: null,
      reportTableData: [],

      total: 0,
      list: [],
      dialogVisible: false,
      isAdd: 'add',
      formData: {
        districtId: null,
        houseAdminId: null,
        blockGroupId: null,
        blockId: null,
        blockAddress: '',
        blockName: '',
        propertyType: null,
        engineeringCategory: null,
        repairProject: null,
        projectYear: '',
        workloadName: '',
        workloadArea: '',
        projectYusuan: '',
        commencementTime: '',
        completionTime: '',
        note: '',
        workloadValue: ""
      },
      uploadDialogVisible: false,
      fileList: [],
      uploadAction: 'http://125.39.77.18:9021/mall-admin/fileUpload/upload',
      importLoading: false,
      multipleSelection: [],
      areaList: [],
      houseAdminList: [],
      houseFormAdminList: [],
      guanpianList: [],
      suoList: [],
      currentFileSrc: [],

      oneList: [],
      twoList: [],
      threeList: []
    }
  },

  computed: {
    getTime() {
      return (val) => {
        if (val) {
          return moment(val).format('YYYY')
        } else {
          return ''
        }
      }
    },

    statusName() {
      return (val) => {
        if (val == 0) {
          return '未上报'
        }
        if (val == 1) {
          return '审核中'
        }
        if (val == 2) {
          return '审核通过'
        }
        if (val == -1) {
          return '审核退回'
        }
      }
    }
  },

  mounted() {
    this.getCommon()
    this.getList()
    this.getClassAll();

  },

  methods: {
    selectable(row) {
      if (row.status == 0) {
        return true
      }

      return false
    },
    getClassAll() {
      getClassNewAll({ kindId: 4 }).then(res => {
        this.oneList = res.data
      })
    },

    handleOneChange(value) {

      this.twoList = [];
      this.threeList = [];
      this.formData.repairProject = "";
      this.formData.workloadName = "";
      getClassmid({ classname: value }).then(res => {
        this.twoList = res.data
      })
    },

    handleTwoChange(value) {
      this.threeList = [];
      this.formData.workloadName = "";
      getClassdetail({
        classname: this.formData.engineeringCategory,
        classmid: value
      }).then(res => {
        this.threeList = res.data;
        if (this.threeList.length > 0) {
          this.formData.workloadName = this.threeList[0].detail
        }
      })
    },
    getCommon() {
      getArea().then((res) => {
        this.areaList = res.data
      })
    },

    handleQuchange(val) {
      this.listQuery.houseAdminId = null
      if (val) {
        this.getHouseAdmin(val)
      } else {
        this.houseAdminList = []
      }
    },

    handleFormQuchange(val) {
      this.formData.houseAdminId = null
      this.handleHouseChange()
      if (val) {
        this.getFormHouseAdmin(val)
      } else {
        this.houseFormAdminList = []
      }
    },

    getHouseAdmin(val) {
      getHouseAdmin({
        DID: val,
        pageNum: 1,
        pageSize: 100000
      }).then((res) => {
        this.houseAdminList = res.data.list
      })
    },
    getFormHouseAdmin(val) {
      getHouseAdmin({
        DID: val,
        pageNum: 1,
        pageSize: 100000
      }).then((res) => {
        this.houseFormAdminList = res.data.list
      })
    },

    handleHouseChange(val) {
      this.formData.blockGroupId = null
      this.handleGuanpianChange()
      if (val) {
        getBlockGroup({
          houseAdminId: val,
          pageNum: 1,
          pageSize: 10000
        }).then((res) => {
          this.guanpianList = res.data.list
        })
      } else {
        this.guanpianList = []
      }
    },

    handleGuanpianChange(val) {
      this.formData.blockId = null
      this.handleSuoChange()
      if (val) {
        getBlockByGroup({
          group: val,
          pageNum: 1,
          pageSize: 10000
        }).then((res) => {
          this.suoList = res.data.list
        })
      } else {
        this.suoList = []
      }
    },

    handleSuoChange(val) {

      if (val) {
        this.suoList.forEach((item) => {

          if (item.blockid == val) {

            this.formData.blockAddress = item.address
            this.formData.propertyType = item.livingway
            this.formData.blockName = item.blockno
          }
        })
      } else {
        this.formData.blockAddress = ''
        this.formData.propertyType = ''
        this.formData.blockName = ''

      }
    },

    handleReportCallback(id) {
      this.$confirm('是否回退该计划', '提示', {
        confirmButtonText: '保 存',
        cancelButtonText: '取 消',
        type: 'warning'
      })
        .then(() => {
          backPlanYear(id).then((res) => {
            Message({
              message: res.message || '操作成功',
              type: 'success',
              duration: 2 * 1000
            })
            this.getList()
          })
        })
        .catch(() => { })
    },



    handleSelectionChange(val) {
      console.log(val)
      let arr = [];
      val.forEach(item => {
        if (item.status == 0) {
          arr.push(item)
        }
      })
      console.log(arr)
      this.multipleSelection = arr
    },
    handleReportDialogClose() {
      this.reportYear = null
      this.reportTableData = []
    },
    handleReportDialogOpen() {
      // 确认上报

      this.$confirm('是否上报选择的计划', '确认提示', {
        confirmButtonText: '确 认',
        cancelButtonText: '取 消',
        type: 'warning'
      })
        .then(() => {

          let arr = [];
          this.multipleSelection.forEach(item => {
            arr.push(item.id)
          })

          let ids = arr.join(',');
          let formData = new FormData();
          formData.append('ids', ids);
          formData.append('type', 1)
          reportPlanYear(formData).then(res => {
            this.multipleSelection = [];
            this.$message.success("上报成功");
            this.getList();
          })
          // 去上报
        })
        .catch(() => { })
    },

    handleSearchReportData() {
      listAll(this.listQuery).then((response) => {
        this.reportTableData = response.data.list
      })
    },

    // 上传失败
    handleUploadError(err, file) {
      this.$message.error('文件上传失败')
    },

    // 导入数据
    handleImport() {
      if (this.fileList.length === 0) {
        this.$message.warning('请先选择要导入的文件')
        return
      }

      this.importLoading = true
      setTimeout(() => {
        this.importLoading = false
        this.uploadDialogVisible = false
        this.$message.success('导入成功！')
        this.getList()
      }, 2000)
    },
    // 批量导入
    handleBatchImport() {
      this.uploadDialogVisible = true
      this.fileList = []
    },

    // 上传前验证
    beforeUpload(file) {
      const isExcel =
        file.type === 'application/vnd.ms-excel' ||
        file.type ===
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (!isExcel) {
        this.$message.error('只能上传 Excel 文件！')
        return false
      }

      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 2MB!')
        return false
      }

      return true
    },
    // 文件选择变化
    handleFileRemove(file, fileList) {
      this.fileList = fileList
      let arr = [...this.currentFileSrc]
      let i
      arr.forEach((item, index) => {
        if (item.fileSize == file.size && item.name == file.name) {
          i = index
        }
      })
      arr.splice(i, 1)
      this.currentFileSrc = arr
    },
    // 上传成功
    handleUploadSuccess(response, file, fileList) {
      this.fileList = fileList
      if (response.code == 200) {
        this.$message.success('文件上传成功')
        this.currentFileSrc.push(response.data)
      } else {
        this.$message.error('文件上传失败')
        let arr = [...fileList.map((i) => i)]
        arr.pop()
        this.fileList = arr
      }
    },
    handleUploadDialogClose() {
      this.fileList = []
      this.currentFileSrc = []
      this.$refs.upload.clearFiles()
      this.uploadDialogVisible = false
    },
    handleSubmitClick() {
      const { formData } = this
      if (this.isAdd == 'add') {
        createPlanYear({
          ...formData,
          dataType: 1,
          districtName: localStorage.getItem("userDname"),
          houseAdminName: localStorage.getItem("userHouseAdminName")
        }).then((res) => {
          this.handleClose()
          this.getList()
          Message({
            message: res.message || '操作成功',
            type: 'success',
            duration: 2 * 1000
          })
        })
      }
      if (this.isAdd == 'update') {
        updatePlanYear({
          ...formData,
          dataType: 1,
          districtName: localStorage.getItem("userDname"),
          houseAdminName: localStorage.getItem("userHouseAdminName")
        }).then((res) => {
          this.handleClose()
          this.getList()
          Message({
            message: res.message || '操作成功',
            type: 'success',
            duration: 2 * 1000
          })
        })
      }
    },

    handleSizeChange(val) {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.getList()
    },

    handleSearch() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    getList() {
      listAll({
        ...this.listQuery,
        projectYear: this.listQuery.projectYear
          ? moment(this.listQuery.projectYear).format('YYYY')
          : ''
      }).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.multipleSelection = []
      })
    },

    resetForm(val) {
      this.formData.workloadName = '';
      this.$refs[val].resetFields()
      this.listQuery.pageNum = 1

      if (val == 'searchForm') {
        this.houseAdminList = []
      }
    },

    async handleAddUser(type) {

      await this.handleFormQuchange(localStorage.getItem('userDID'))
      await this.handleHouseChange(localStorage.getItem('userHouseAdminId'))
      this.formData.districtId = Number(localStorage.getItem('userDID'));
      this.formData.houseAdminId = Number(localStorage.getItem('userHouseAdminId'))
      this.isAdd = 'add'
      this.dialogVisible = true

    },

    handleClose() {
      this.resetForm('dataForm')
      this.dialogVisible = false
      this.houseFormAdminList = []
      this.guanpianList = []
      this.suoList = []
    },

    async handleUpdate(currentData, type) {
      this.isAdd = type
      //   一定要在打开弹窗前 再赋值 不然resetFiles没用
      this.dialogVisible = true
      await this.handleFormQuchange(currentData.districtId)
      await this.handleHouseChange(currentData.houseAdminId)
      await this.handleGuanpianChange(currentData.blockGroupId)
      this.handleOneChange(currentData.engineeringCategory)
      this.formData.engineeringCategory = currentData.engineeringCategory
      this.handleTwoChange(currentData.repairProject)
      this.formData = { ...currentData }
      this.$forceUpdate()
    },

    handleDelete(id) {
      this.$confirm('此操作将删除该条内容，请确认是否继续操作？', '删除提示', {
        confirmButtonText: '保 存',
        cancelButtonText: '取 消',
        type: 'warning'
      })
        .then(() => {
          deletePlanYear(id).then((res) => {
            Message({
              message: res.message || '操作成功',
              type: 'success',
              duration: 2 * 1000
            })
            this.getList()
          })
        })
        .catch(() => { })
    }
  }
}
</script>

<style scoped>
.el-date-editor.el-input {
  width: 100%;
  cursor: pointer;
}

/* 上传组件标准样式 */
.upload-container {
  padding: 20px 0;
  width: 100%;
}

.upload-dragger {
  width: 100% !important;
}

.upload-dragger .el-upload {
  width: 100% !important;
}

.upload-dragger .el-upload-dragger {
  width: 100% !important;
  height: 200px;
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease;
  background-color: #fafafa;
  box-sizing: border-box;
}

.upload-dragger .el-upload-dragger:hover {
  border-color: #409eff;
  width: 100%;
}

.upload-dragger .el-upload-dragger .el-icon-upload {
  font-size: 67px;
  color: #c0c4cc;
  margin: 40px 0 16px;
  line-height: 50px;
  width: 100%;
}

.upload-dragger .el-upload__text {
  color: #606266;
  font-size: 14px;
  text-align: center;
}

.upload-dragger .el-upload__text em {
  color: #409eff;
  font-style: normal;
}

.template-download {
  margin-top: 15px;
  font-size: 14px;
  color: #606266;
}

.template-download .el-button--text {
  color: #409eff;
  padding: 0;
  font-size: 14px;
}

::v-deep .el-upload {
  width: 100% !important;
}

::v-deep .el-upload-dragger {
  width: 100% !important;
}

/* 附件查看弹窗样式 */
.attachment-view {
  padding: 20px;
  min-height: 200px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 24px;
  justify-items: center;
}

.attachment-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 120px;
}

.file-icon {
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s;
}

.file-icon:hover {
  transform: scale(1.05);
}

/* 具体文件类型样式 */
.file-pdf {
  background: #ef4a37;
}

.pdf-lines {
  width: 48px;
  height: 36px;
  position: relative;
  margin-bottom: 8px;
}

.pdf-lines::before,
.pdf-lines::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: white;
  border-radius: 1px;
}

.pdf-lines::before {
  top: 8px;
}

.pdf-lines::after {
  top: 16px;
}

.pdf-lines>span {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  height: 3px;
  background: white;
  border-radius: 1px;
}

.file-word {
  background: #2b579a;
}

.word-icon {
  font-size: 32px;
  color: white;
  font-weight: bold;
  margin-bottom: 8px;
}

.file-excel {
  background: #217346;
}

.excel-icon {
  font-size: 32px;
  color: white;
  font-weight: bold;
  margin-bottom: 8px;
}

.file-image {
  background: #ff6b35;
}

.file-default {
  background: #909399;
}

.default-icon {
  font-size: 24px;
  color: white;
  font-weight: bold;
  margin-bottom: 8px;
}

.file-text {
  color: white;
  font-size: 12px;
  font-weight: bold;
  font-family: Arial, sans-serif;
}

.file-name {
  font-size: 12px;
  color: #606266;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
  word-break: break-all;
  max-width: 100%;
}

/* 表单样式 */
.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #20b2aa;
  margin: 20px 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #20b2aa;
}

.file-list-item {
  margin: 5px 0;
}

.file-list-item .el-button--text {
  color: #409eff;
  padding: 0;
  font-size: 14px;
}

/* 文件预览样式 */
.file-preview-content {
  padding: 20px;
  text-align: center;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.image-preview {
  text-align: center;
}

.file-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.file-icon-large {
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  position: relative;
  transition: transform 0.2s;
}

.file-icon-large:hover {
  transform: scale(1.05);
}

/* 大尺寸文件图标样式 */
.file-icon-large.file-pdf {
  background: #ef4a37;
}

.file-icon-large .pdf-lines {
  width: 72px;
  height: 54px;
  position: relative;
  margin-bottom: 12px;
}

.file-icon-large .pdf-lines::before,
.file-icon-large .pdf-lines::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: white;
  border-radius: 2px;
}

.file-icon-large .pdf-lines::before {
  top: 12px;
}

.file-icon-large .pdf-lines::after {
  top: 24px;
}

.file-icon-large .pdf-lines>span {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  height: 4px;
  background: white;
  border-radius: 2px;
}

.file-icon-large.file-word {
  background: #2b579a;
}

.file-icon-large .word-icon {
  font-size: 48px;
  color: white;
  font-weight: bold;
  margin-bottom: 12px;
}

.file-icon-large.file-excel {
  background: #217346;
}

.file-icon-large .excel-icon {
  font-size: 48px;
  color: white;
  font-weight: bold;
  margin-bottom: 12px;
}

.file-icon-large.file-image {
  background: #ff6b35;
}

.file-icon-large.file-default {
  background: #909399;
}

.file-icon-large .default-icon {
  font-size: 36px;
  color: white;
  font-weight: bold;
  margin-bottom: 12px;
}

.file-icon-large .file-text {
  color: white;
  font-size: 16px;
  font-weight: bold;
  font-family: Arial, sans-serif;
}

.file-name-large {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
  word-break: break-all;
  max-width: 400px;
}

.file-size {
  font-size: 14px;
  color: #909399;
  font-weight: normal;
}

.report-top {
  display: flex;
  align-items: center;

  .el-date-editor.el-input {
    width: 200px;
  }

  span {
    color: #333333;
    margin-right: 10px;
  }

  .el-button {
    margin-left: 10px;
  }
}

.report-table {
  margin-top: 20px;
}

.el-button--primary.is-disabled {
  background-color: #008c9333;
  border-color: #008c9333;
}

.el-form-item__content .el-input-group {
  vertical-align: middle;
}
</style>